<template>
  <view :style="colorStyle" class="wrap">
    <view class="container">
      <view class="card1">
        <view class="card_box">
          <view class="in_box">
            <view class="title">
              {{ browserConfig.store_name || "XXXXXX有限公司" }}
            </view>
            <view class="sub_title"> 检测结果 </view>
            <view class="info_box">
              <view class="info_item flex_s">
                <view class="info_title"> 报告编号 </view>
                <view class="info_text">
                  {{ reportData.report_number || "JZL/JC-010101010101-01" }}
                </view>
              </view>
              <view class="info_item flex_s">
                <view class="info_title"> 板料编号 </view>
                <view class="info_text">
                  {{ reportData.sheet_metal_number || "Z11111" }}
                </view>
              </view>
              <view class="info_item flex_s">
                <view class="info_title"> 产品名称 </view>
                <view class="info_text">
                  {{ reportData.product_name || "未知" }}
                </view>
              </view>
              <view class="info_item flex_s">
                <view class="info_title"> 含量 </view>
                <view class="info_text"> {{ reportData.themilk || "0" }} </view>
              </view>
              <view class="info_item flex_s">
                <view class="info_title"> 质量 </view>
                <view class="info_text">{{ reportData.weight || "0g" }}</view>
              </view>
              <view class="info_item flex_s">
                <view class="info_title"> 查询次数 </view>
                <view class="info_text"> {{ view_num || 0 }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="card2">
        <view class="title"> 我们郑重承诺 </view>
        <view class="sub_title"> 明大金业·品质保证·服务保证 </view>
        <view class="img_list">
          <view
            class="img_item"
            v-for="(item, index) in 4"
            :key="index"
            @click="goHandler(index)"
          >
            <image :src="`/static/image/menu${index + 1}.png`"></image>
          </view>
        </view>
      </view>
      <view class="rich_box">
        <!-- <rich-text :nodes="nodeData"></rich-text> -->
        <view :innerHTML="nodeData"></view>
      </view>
    </view>
    <up-popup
      :show="show"
      mode="center"
      @close="close"
      @open="open"
      :overlayStyle="{ background: '#000' }"
    >
      <view class="pop_img">
        <image
          src="/static/image/menu1.png"
          show-menu-by-longpress
          lazy-load
          mode="scaleToFill"
        />
      </view>
    </up-popup>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { useTheme } from "@/composables/useTheme";
const { colorStyle } = useTheme();
import { $L, JumpPath, Tips } from "@/utils";
import { qrcodeInfo } from "@/api";
import { type reportDataItem, type browserConfigItem } from "@/types/index";
var view_num = ref(0); //查询次数
let reportData = ref<reportDataItem>({
  report_number: "",
  sheet_metal_number: "",
  product_name: "",
  themilk: "",
  weight: 0,
  id: 0,
});
let browserConfig = ref<browserConfigItem>({
  store_name: "",
  home_content: "",
  wxapp_buyback: "",
  wxapp_gold_price: "",
});
let paramsInfo = ref({
  qr_code: "", //二维码编号
  device_id: uni.getSystemInfoSync().deviceId, //手机设备号
  province: "", //省份
  city: "", //城市
  area: "", //区县
  lng: "", //经度
  lat: "", //纬度
});

onLoad(async (option: any) => {
  if (!option.qr_code) return Tips({ title: "请提供qr_code码" });

  uni.showLoading({
    title: "加载中...",
  });
  paramsInfo.value.qr_code = option.qr_code;
  try {
    let locationData: any = await $L.getLocation();
    console.log(locationData, "获取位置信息成功");

    paramsInfo.value.lng = locationData.longitude;
    paramsInfo.value.lat = locationData.latitude;
  } catch (error) {
    console.log(error, "获取位置失败");
  }

  qrcodeInfoHandler();
});
// 判断是否在微信浏览器中
function isInWeChat(): boolean {
  const ua = navigator.userAgent.toLowerCase();
  return /micromessenger/i.test(ua);
}
let nodeData = ref("");
// 获取首页数据
function qrcodeInfoHandler() {
  qrcodeInfo(paramsInfo.value)
    .then((res: any) => {
      uni.hideLoading();
      const { data } = res;
      reportData.value = data.report;
      browserConfig.value = data.browser_config;
      view_num.value = data.view_num;
      nodeData.value = formatRichText(browserConfig.value.home_content);
    })
    .catch((err) => {
      console.log(err, "错误信息");
    });
}
function formatRichText(node: string) {
  let newContent = node.replace(
    /\<img/gi,
    '<img style="width:100%;height:auto;display:block;"'
  );

  return newContent;
}

function goHandler(index: number) {
  let url = "";
  switch (index) {
    case 0:
      JumpPath("/pages/report/index?id=" + reportData.value.id);
      break;
    case 1:
      JumpPath("/pages/about/index");

      break;
    case 2:
      url = browserConfig.value.wxapp_gold_price;
      if (isInWeChat()) {
        window.open(url, "_blank");
      } else {
        Tips({ title: "请在微信客户端中打开此页面" });
      }

      break;

    default:
      url = browserConfig.value.wxapp_buyback;
      if (isValidUrl(url)) {
        window.location.href = url;
      } else {
        Tips({ title: "链接不可用" });
      }

      break;
  }
}
// URL 校验函数
function isValidUrl(url: string): boolean {
  try {
    new URL(url);
    return true;
  } catch (e) {
    console.log(e, "错误");

    return false;
  }
}
// 创建响应式数据
const show = ref(false);

// 定义方法
function open() {
  // 打开逻辑，比如设置 show 为 true
  show.value = true;
  // console.log('open');
}

function close() {
  // 关闭逻辑，设置 show 为 false
  show.value = false;
  // console.log('close');
}
</script>

<style scoped lang="scss">
.wrap {
  overflow: hidden;
  min-height: 100vh;
  background-color: var(--view-theme);
  .pop_img {
    width: 600rpx;
    height: 600rpx;
    overflow: hidden;
    image {
      widows: 100%;
      height: 100%;
    }
  }
  .container {
    max-width: 750rpx;
    margin: 0 auto;
    background: #fff;
    .rich_box {
      min-height: 50vh;
      width: 100%;
    }
  }
  .card2 {
    background: #fff;
    margin-bottom: 70rpx;
    .img_list {
      padding: 0 36rpx;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 28rpx 22rpx;
      .img_item {
        image {
          display: block;
          width: 324rpx;
          height: 134rpx;
        }
      }
    }
    .title {
      padding: 50rpx 0 20rpx;
      text-align: center;
      font-size: 40rpx;
      font-weight: bold;
    }
    .sub_title {
      font-size: 28rpx;
      letter-spacing: 10rpx;
      background-image: linear-gradient(
        133.36deg,
        #bd7e21 0%,
        #ebd983 25.69%,
        #faf399 55.6%,
        #e09226 100%
      ); /* 渐变方向和颜色 */
      -webkit-background-clip: text;
      color: transparent;
      text-align: center;
      margin-bottom: 30rpx;
    }
  }
  .card1 {
    padding-top: 500rpx;
    width: 750rpx;
    min-height: 1160rpx;
    background: url("/static/image/bg1.png") no-repeat;
    background-size: 100% auto; // 铺满整个容器
    .card_box {
      width: 727rpx;
      // height: 606rpx;
      margin: 0 auto;
      background: url("/static/image/bg2.png") no-repeat;
      background-size: 100% 100%; // 铺满整个容器
      padding: 25rpx;
      .in_box {
        text-align: center;
        background: rgb(252, 245, 193);
        .title {
          font-size: 40rpx;
          color: #9f580e;
          font-weight: bold;
          padding: 0rpx 0 10rpx;
        }
        .sub_title {
          height: 57rpx;
          line-height: 57rpx;
          font-size: 30rpx;
          color: #9f580e;
          background: #fde388;
        }
        .info_box {
          .info_item {
            height: 72rpx;
            line-height: 72rpx;
            font-size: 28rpx;
            &:not(:last-child) {
              border-bottom: 2rpx solid rgba(253, 227, 136, 0.5);
            }
            .info_title {
              width: 30%;
              background: rgba(253, 227, 136, 0.5);
              color: #9f580e;
            }
            .info_text {
              width: 70%;
              color: #4a433c;
            }
          }
        }
      }
    }
  }
}
</style>
